import {getAreaConfig, getIndustryConfig} from '@/utils/filterConfig';
import {
  getCompanyType,
  getFinancialType,
} from './../apis';
import {ComponentType} from 'vc';
import {useRequest} from 'vue-request';

export function useScreen() {
  const PAGE_SIZE = 15;

  const queryData = reactive<any>({
    pageNum: 1,
    pageSize: PAGE_SIZE,
    searchTxt: '',
    sortRule: '',
    provinceCode: '',
    cityCode: '',
    countryCode: '',
    sort: 'desc',
    bondCompanyType: 1
  });

  // 地区
  const areaData = getAreaConfig();
  areaData.value.submitFn = (val) => {
    const {lv1, lv2, lv3} = val;

    queryData.provinceCode = lv1.join();
    queryData.cityCode = lv2.join();
    queryData.countryCode = lv3.join();
  };

  // 行业
  const industryData = getIndustryConfig();
  industryData.value.submitFn = (val) => {
    const {lv1, lv2, lv3} = val;

    queryData.industryCategoryCodeLv1 = lv1?.join() || '';
    queryData.industryCategoryCodeLv2 = lv2?.join() || '';
    queryData.industryCategoryCodeLv3 = lv3?.join() || '';
  };


  // 企业机构类型
  const {data} = useRequest(getCompanyType, {});
  const companyTypeData = {
    title: '机构类型',
    component: ComponentType.MULTIPLE,
    options: data,
    submitFn: (data) => {
      queryData.companyType = data;
    }
  };
  // 金融机构类型
  const {data: finanTpyeData} = useRequest(getFinancialType, {});
  const financialTypeData = {
    title: '机构类型',
    component: ComponentType.CASCADER,
    options: finanTpyeData,
    submitFn: (data) => {
      const {lv1, lv2, lv3} = data
      queryData.companyType = lv2.join(',');
    }
  };


  const screen = ref([areaData.value, industryData.value, companyTypeData
  ]);
  const screen2 = ref([areaData.value, financialTypeData
  ]);

  return {
    PAGE_SIZE,
    screen,
    screen2,
    queryData
  };
}
